<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Konva</title>
		<script src="https://unpkg.com/konva@7.0.3/konva.min.js"></script>
		<script src='./circle06.js'></script>
  </head>
  <body>
    <div id="container"></div>
		<!-- Knova官网 https://konvajs.github.io/ -->
    <script>
      // 创建舞台
      var stage = new Konva.Stage({
      	container: 'container',
      	width: window.innerWidth,
      	height: window.innerHeight
      })
      
      // 创建层
      var bgLayer = new Konva.Layer()
      stage.add(bgLayer)
      
      // 中心点坐标
      var cenX = stage.width() / 2
      var cenY = stage.height() / 2
			
			// 绘制背景
			var innerRadius = 126
			var outerRadius = 220
			
			// 内圆环
			var innerCircle = new Konva.Circle({
				x: cenX,
				y: cenY,
				radius: innerRadius,
				stroke: '#ccc',
				strokeWidth: 4,
				dash: [10, 4] //设置虚线，10像素实线，4像素空
			})
			bgLayer.add(innerCircle)
			
			// 外圆环
			var outerCircle = new Konva.Circle({
				x: cenX,
				y: cenY,
				radius: outerRadius,
				stroke: '#ccc',
				strokeWidth: 4,
				dash: [10, 4] //设置虚线，10像素实线，4像素空
			})
			bgLayer.add(outerCircle)
			
      var cenCircleText = new CircleText({
				x: cenX,
				y: cenY,
				innerRadius: 66,
				outerRadius: 80,
				innerStyle: '#525A82',
				outerStyle: '#E1E1E1',
				text: 'WEB全栈'
			})
			cenCircleText.addToGroupOrLayer(bgLayer)
			
			bgLayer.draw()
			
			// 动画层的绘制
			var animateLayer = new Konva.Layer()
			stage.add(animateLayer)
			
			// 添加2环的圆
			var L2Group = new Konva.Group({
				x: cenX,
				y: cenY
			})
			
			var L2_CircleText_CSS3 = new CircleText({
				x: innerRadius * Math.cos( 160 * Math.PI / 180),
				y: innerRadius * Math.sin( 160 * Math.PI / 180),
				innerRadius: 30,
				outerRadius: 40,
				innerStyle: '#FACED6',
				outerStyle: '#E1E1E1',
				text: 'CSS3'
			})
			L2_CircleText_CSS3.addToGroupOrLayer(L2Group)
			var L2_CircleText_Node = new CircleText({
				x: innerRadius * Math.cos( -60 * Math.PI / 180),
				y: innerRadius * Math.sin( -60 * Math.PI / 180),
				innerRadius: 30,
				outerRadius: 40,
				innerStyle: '#FFCCEE',
				outerStyle: '#E1E1E1',
				text: 'Node'
			})
			L2_CircleText_Node.addToGroupOrLayer(L2Group)
			// 把第2层的组添加到动画层上
			animateLayer.add(L2Group)
			
			// 添加3环的圆
			var L3Group = new Konva.Group({
				x: cenX,
				y: cenY
			})
			
			var L3_CircleText_JAVA = new CircleText({
				x: outerRadius * Math.cos( 60 * Math.PI / 180),
				y: outerRadius * Math.sin( 60 * Math.PI / 180),
				innerRadius: 50,
				outerRadius: 60,
				innerStyle: '#91BFF8',
				outerStyle: '#E1E1E1',
				text: 'JAVA'
			})
			L3_CircleText_JAVA.addToGroupOrLayer(L3Group)
      // 把第3层的组添加到动画层上
      animateLayer.add(L3Group)
			
			animateLayer.draw()
			
			var rotateAnglePer = 60;//每秒设置旋转60度
			// konvas的帧动画系统
			var animate = new Konva.Animation(function(frame){
				// 计算当前帧需要旋转的角度
				var rotateAngle = rotateAnglePer * frame.timeDiff / 1000;//上一帧和当前帧的时间差,毫秒
				L2Group.rotate(rotateAngle);
				// 拿到2环上所有圆的内部组进行反向旋转
				L2Group.getChildren().each(function(item,index){
					item.rotate(-rotateAngle)
				})
				
				L3Group.rotate(-rotateAngle);
				// 拿到2环上所有圆的内部组进行反向旋转
				L3Group.getChildren().each(function(item,index){
					item.rotate(rotateAngle)
				})
			}, animateLayer);
			animate.start();//启动动画
			
			animateLayer.on('mouseover',function(){
				rotateAnglePer = 10
			})
			animateLayer.on('mouseout',function(){
				rotateAnglePer = 60
			})
    </script>
  </body>
</html>